<template>
  <view class="box">
    <view class="example">
      <!-- 基础用法，不包含校验规则 -->
      <uni-forms
        style="margin: 10px 0"
        label-width="100px"
        ref="baseForm"
        :rules="rules"
        :model="baseFormData"
      >
        <uni-forms-item class="label" label="申请部门" required name="useDept">
       <Select v-model="baseFormData.useDept" multiple dataKey="text" dataValue="value" :localdata="range"  
					@change="change"></Select>
        </uni-forms-item>
        <uni-forms-item class="label" label="用车人" required name="usePeople">
          <uni-easyinput
            v-model="baseFormData.usePeople"
            placeholder="请输入用车人"
          />
        </uni-forms-item>
        <uni-forms-item
          class="label"
          label="乘车人数"
          required
          name="usePeopleNum"
        >
          <uni-easyinput
            v-model="baseFormData.usePeopleNum"
            placeholder="请输入乘车人数"
          />
        </uni-forms-item>
        <uni-forms-item
          class="label"
          label="起始时间"
          required
          name="startTime"
        >
          <uni-datetime-picker
            type="date"
            :clear-icon="false"
            v-model="baseFormData.startTime"
          />
        </uni-forms-item>
        <uni-forms-item class="label" label="结束时间" required name="endTime">
          <uni-datetime-picker
            type="date"
            :clear-icon="false"
            v-model="baseFormData.endTime"
          />
        </uni-forms-item>
        <uni-forms-item
          class="label"
          label="用车事由"
          required
          name="useReason"
        >
          <uni-easyinput
            type="textarea"
            v-model="baseFormData.useReason"
            placeholder="请输入用车事由"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="xin">
      <view class="xin_tab">
        <text>行程信息</text>
        <text @click="add('add')" style="padding-left: 65%; color: #577af5"
          >添加行程</text
        >
      </view>
      <view v-for="(item, index) in list" :key="item.id" class="xin_con">
        <view class="xin_con_label">行程{{ index + 1 }}</view>
        <uni-easyinput v-model="item.origin" placeholder="请输入起始点" />
        <uni-easyinput v-model="item.pass" placeholder="请输入途径地" />
        <uni-icons @click="add('', item.id)" type="trash" size="30"></uni-icons>
      </view>
    </view>

    <view class="bottom">
      <u-cell-group>
        <u-cell
          title="审批流程"
          label="已有管理员预设审批人，不可修改和删除"
          center
        ></u-cell>
      </u-cell-group>
      <view v-for="item in flow" :key="item" class="step">
        <view class="step_left">
          <uni-icons type="person" size="30"></uni-icons>
          <view class="line"></view>
          <!-- <uni-icons type="person" size="30"></uni-icons> -->
        </view>
        <view class="step_right">
          <view class="step_right_title">
            <text>{{ item }}</text>
          </view>
          <view class="step_right_con">
            <text></text>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 80px"></view>
    <view class="below">
      <u-button class="btn" type="primary" @click="zanSubmit('baseForm')">
        暂存
      </u-button>
      <u-button class="btn" type="primary" @click="submit('baseForm')">
        提交申请
      </u-button>
    </view>
  </view>
</template>

<script>
import { taskNode, add, deptList } from "@/api/usercar";
export default {
  name: "MinirabbitAdd",

  data() {
    return {
      list: [],
      flow: [],
      multiIndex:[0,0],
      // 表单数据
      baseFormData: {
        useDept: [],
        usePeople: "",
        usePeopleNum: "",
        startTime: "",
        endTime: "",
        useReason: "",
      },
      range: [],
      rules: {
        useDept: {
          rules: [
            {
              required: true,
              errorMessage: "申请部门不能为空",
            },
          ],
        },
        usePeople: {
          rules: [
            {
              required: true,
              errorMessage: "用车人不能为空",
            },
          ],
        },
        usePeopleNum: {
          rules: [
            {
              required: true,
              errorMessage: "乘车人数不能为空",
            },
          ],
        },
        startTime: {
          rules: [
            {
              required: true,
              errorMessage: "起始时间不能为空",
            },
          ],
        },
        endTime: {
          rules: [
            {
              required: true,
              errorMessage: "结束时间不能为空",
            },
          ],
        },
        useReason: {
          rules: [
            {
              required: true,
              errorMessage: "用车事由不能为空",
            },
          ],
        },
      },
    };
  },
  async onLoad(options) {
    const res = await deptList();
    this.range = res.data[0].children.map((item) => {
      return {
        text: item.deptName,
        value: item.id,
      };
    });
    if (options.row) {
      const row = JSON.parse(options.row).variables;
      this.baseFormData.useDept =row.useDeptName?row.useDeptName.split(',').map(item=> this.range.find(items=>items.text===item).value):[]
      this.baseFormData.usePeople = row.usePeople;
      this.baseFormData.usePeopleNum = row.usePeopleNum;
      this.baseFormData.startTime = row.startTime;
      this.baseFormData.endTime = row.endTime;
      this.baseFormData.useReason = row.useReason;
      this.list = row.driveInfoList;
    }
    const { data } = await taskNode();
    this.flow = data;
  },
  mounted() {
    const value = JSON.parse(localStorage.getItem("usercarApply"));
    if (value) {
      uni.showModal({
        title: "提示",
        content: "是否恢复上次已填写的数据",
        success: (res) => {
          if (res.confirm) {
            this.baseFormData = value;
            this.list = value.driverInfo;
          } else if (res.cancel) {
          }
        },
      });
    }
  },

  methods: {
    add(type, index) {
      if (type === "add") {
        this.list.push({
          id: new Date().getTime(),
          origin: "",
          pass: "",
        });
      } else {
        this.list = this.list.filter((item) => {
          return item.id !== index;
        });
      }
    },
    //提交申请
    async submit(ref) {
      const res = await this.$refs[ref].validate();
      res.useDept=res.useDept.length>0?res.useDept.join(','):''
      const value = {
        ...res,
        driverInfo: this.list.length > 0 ? JSON.stringify(this.list) : [],
      };
      await add(value);
      localStorage.removeItem("usercarApply");
      uni.showToast({
        title: `提交通过`,
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
    async zanSubmit(ref) {
      const res = await this.$refs[ref].validate();
      const value = {
        ...res,
        driverInfo: this.list.length > 0 ? this.list : [],
      };
      localStorage.setItem("usercarApply", JSON.stringify(value));
      uni.showToast({
        title: `暂存成功`,
      });
    },
    change() {},
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f2f2;
}
.box {
  min-height: 100vh;
  position: relative;
  background-color: #f2f2f2;
}
.example {
  background-color: #fff;
  padding: 5px 0;
}
.label {
  padding: 0 12px 0 18px !important;
}
.bottom {
  margin-top: 10px;
  background-color: #fff;
}
.xin {
  width: 100%;
  margin: 10px 0;
  background-color: #fff;
  .xin_tab {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
  }
  .xin_con {
    width: 100%;
    padding: 10px;
    display: flex;
    .xin_con_label {
      line-height: 37px;
      width: 18%;
    }
  }
}
.below {
  width: 90%;
  position: absolute;
  left: 5%;
  bottom: 20px;
}
.step {
  display: flex;
  padding: 10px;
  width: 100%;
  .step_left {
    flex: 1;
    display: flex;
    flex-direction: column;
    .line {
      width: 1px;
      background-color: #4265f3;
      height: 80px;
      // margin: auto;
      margin: 0 auto;
    }
  }
  .step_right {
    flex: 6;
    .step_right_title {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
    }
    .step_right_con {
      height: 80px;
      font-size: 14px;
      line-height: 80px;
      // padding-left: 40px;
    }
  }
}
.btn {
  width: 40%;
  display: inline-block;
  line-height: 40px;
  margin: 5%;
}
</style>